<template>
  <com-main>
    <div slot="com_header">首页>商品管理>参数列表</div>
    <div slot="com_content">
      <div class="com_a">
        <i class="el-alert__icon el-icon-warning"></i>
        注意:只允许为三级分类设置参数
      </div>
      <div class="com_b">
        <el-form label-width="100px">
      
          <el-form-item label="请选择分类：">
            <el-cascader
              v-model="id"
              :options="options"
              :props="caderobj"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="1">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="参数名称" width="180">
              </el-table-column>
              <el-table-column>
                <template slot-scope="{row}">
                  <button type="primary">添加</button>
                  <el-table-column label="操作"></el-table-column>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="静态属性" name="2">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="参数名称" width="180">
              </el-table-column>
              <el-table-column>
                <template slot-scope="{row}">
                  <button type="primary">添加</button>
                  <el-table-column label="操作"></el-table-column>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </com-main>
</template>
<script>
import ComMain from "../../components/commain.vue";
import { api_categories } from "../../api/goods";
export default {
  components: {
    ComMain,
  },
  data() {
    return {
      activeIndex: "1",
      
      searchobj: {
        type: "", //查询参数
        pagenum: "", //当前页码
        pagesize: "", //每页显示条数
      },
      caderobj: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
      options: [],
      activeName:0,
      tableData:[]
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    async query() {
      let rst = await api_categories(this.searchobj);
      let { data, meta } = rst;
      this.options = data;
      console.log(data);
    },
    handleChange(value) {
      console.log(value);
    },
       handleClick(tab, event) {
        // console.log(tab, event);
      }
  },
};
</script>
<style>
.com_a {
  background-color: #fdf6ec;
  height: 30px;
  color: #e0a046;
  line-height: 30px;
  padding-left: 40px;
}
.com_b {
  padding-top: 20px;
}
</style>